<template>
  <div class="PersonalPage_head">
    <div class="top_left" v-if="props.id == undefined">
      <div class="name">
        <img
          class="imgs"
          :src="props.data.role[0] == 1 ? hat : rating"
          alt=""
        />
        <p>
          {{ props.data.role[0] !== 1 ? props.data.name : props.data.nickName }}
        </p>
      </div>
      <div class="class_charge">
        <p class="class_style_header">
          {{
            props.data.role[0] === 0
              ? ""
              : props.data.role[0] === 1
              ? "负责班级："
              : "所在班级："
          }}
        </p>
        <ul v-if="props.data.role[0] === 0">
          <li></li>
        </ul>
        <ul v-if="props.data.role[0] === 1">
          <li
            class="class_style"
            v-for="(item, index) in props.data.chargeClass"
            :key="index"
            @click="classPage(item)"
          >
            {{ item.name }}
          </li>
        </ul>
        <ul v-if="props.data.role[0] === 2">
          <li class="class_style" @click="classPage(props.data.className)">
            {{ props.data.className.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="top_left" v-else-if="idName == '2'">
      <div class="name">
        <img class="imgs" :src="rating" alt="" />
        <p>
          {{ props.data.name }}
        </p>
      </div>
      <div class="class_charge">
        <p class="class_style_header">所在班级：</p>
        <ul>
          <li class="class_style" v-for="item in props.data.chargeClass" :key="item.id" @click="classPage(item)">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="top_left" v-if="idName == '3'">
      <div class="name">
        <img class="imgs" :src="hat" alt="" />
        <p>
          {{ props.data.name }}
        </p>
      </div>
      <div class="class_charge">
        <p class="class_style_header">指导老师</p>
        <ul>
          <li
            class="class_style"
            v-for="(item, index) in props.data.teacher"
            :key="index"
            @click="teachPage(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="class_charge">
        <p class="class_style_header">班级成员：</p>
        <p
          class="class_scharge"
          v-for="(item, index) in newArray"
          :key="index"
          @click="JumpDetails(item)"
        >
          {{ item.name }}、
        </p>
        <el-popover
          v-if="props.data?.classMembers?.length > 5"
          :visible="dropDown"
          placement="bottom"
          :width="700"
        >
          <template #default>
            <ul
              style="
                display: flex;
                flex-wrap: wrap;
                font-size: 15px;
                line-height: 30px;
              "
            >
              <li
                style="color: #22513a"
                class="hover-effect"
                @click="JumpDetails(item)"
                v-for="(item, index) in newArrayshow"
                :key="index"
              >
                {{ item.name }}、
              </li>
            </ul>
          </template>
          <template #reference>
            <el-icon v-if="!dropDown" @click="dropDown = !dropDown">
              <CaretBottom v-if="teacherNames.length <= 5" />
            </el-icon>
            <el-icon v-else @click="dropDown = !dropDown">
              <CaretTop />
            </el-icon>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="top_left" v-if="idName == '1'">
      <div class="name">
        <img class="imgs" :src="hat" alt="" />
        <p>
          {{ props.data.name }}
        </p>
      </div>
      <div class="class_charge">
        <p class="class_style_header">负责班级：</p>
        <ul>
          <li
            class="class_style"
            v-for="(item, index) in props.data.chargeClass"
            :key="index"
            @click="classPage(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!--111111111111111111111111111111111111-->
    <div class="top_right" v-if="props.id == undefined">
      <div class="back">
        <p class="num" v-if="1">{{ Num[3].num }}</p>
        <p>作品分享次数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[0].num }}</p>
        <p>点赞数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[1].num }}</p>
        <p>评论数</p>
      </div>
    </div>
    <div class="top_right" v-else-if="idName == '2'">
      <div class="back">
        <p class="num" v-if="1">{{ Num[3].num }}</p>
        <p>作品分享次数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[0].num }}</p>
        <p>点赞数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[1].num }}</p>
        <p>评论数</p>
      </div>
    </div>
    <div class="top_right" v-if="idName == '3'">
      <div class="back">
        <p class="num" v-if="1">{{ Num[2].num }}</p>
        <p>作品数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[0].num }}</p>
        <p>点赞数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[1].num }}</p>
        <p>评论数</p>
      </div>
    </div>
    <div class="top_right" v-if="idName == '1'">
      <div class="back">
        <p class="num" v-if="1">{{ Num[3].num }}</p>
        <p>作品分享次数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[0].num }}</p>
        <p>点赞数</p>
      </div>
      <div class="back">
        <p class="num">{{ Num[1].num }}</p>
        <p>评论数</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import rating from "@/assets/img/rating.png";
import hat from "@/assets/img/hat.png";

const props = defineProps([
  "data",
  "id",
  "numLikes",
  "numComments",
  "totalLikes",
  "totalComments",
  "totalWorks",
  "totalCommentCount",
]);
const Num = ref([
  { id: 1, num: computed(() => props.totalLikes) },
  { id: 2, num: computed(() => props.totalComments) },
  { id: 3, num: computed(() => props.totalWorks) },
  { id: 4, num: computed(() => props.totalCommentCount) },
]);

// 截取后三个字符
const idName = ref(props.id != undefined ? props.id.slice(-1) : undefined);

// 剩余的部分
const resName = ref(props.id != undefined ? props.id.slice(0, -1) : undefined);
const newArray = props.data?.classMembers?.slice(0, 5);
const newArrayshow = props.data?.classMembers?.slice(
  5,
  props.data.classMembers.length
);

const teacherNames = ref([]);
const dropDown = ref(false);

// 跳转学生个人页面
const JumpDetails = (data) => {
  console.log(data);
  const baseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
  window.open(`${baseUrl}/DetailPage/${data.id}2`, "_blank");
};
// 跳转到那个班级
const classPage = (data) => {
  console.log(data, 1111);
  const baseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
  window.open(`${baseUrl}/ClassPage/${data.id}3`, "_blank");
};
// 对应老师
const teachPage = (data) => {
  console.log(data);
  const baseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
  window.open(`${baseUrl}/TeachPage/${data.id}1`, "_blank");
};
// 查找学生
// const studentData=ref(props.data.filter(item=>{
//   if(item.)
// }))
</script>
<style scoped lang="scss">
.PersonalPage_head {
  display: flex;
  justify-content: space-between;
  align-content: center;

  .top_left {
    width: 70%;
    overflow: hidden;

    .name {
      display: flex;
      color: #0d3b25;
      font-size: 22px;
      font-weight: bold;

      .imgs {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
    }

    .class_charge {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .class_style_header {
        width: 80px;
        line-height: 30px;
        color: #22513a;
      }

      ul {
        display: flex;

        .class_style {
          padding: 2px 10px;
          margin: 3px 5px;
          border: 1px solid #6ecba7;
          background-color: white;
          color: #6ecba7;
          text-align: center;
          font-size: 14px;
        }
      }

      .class_style {
        padding: 2px 10px;
        margin: 3px 5px;
        border: 1px solid #6ecba7;
        background-color: white;
        color: #6ecba7;
        text-align: center;
        font-size: 14px;
      }

      .class_scharge {
        line-height: 30px;
        color: #22513a;
        font-weight: 550;
      }
    }
  }

  .top_right {
    margin-top: 30px;
    display: flex;
    align-content: center;
    justify-content: space-around;

    .back {
      min-width: 115px;
      text-align: center;
      border-right: 2px solid #22513a;

      p {
        font-size: 14px;
        color: #22513a;
      }

      .num {
        margin-top: 10px;
        font-size: 20px;
        color: #22513a;
        font-weight: bold;
      }
    }

    .back:last-of-type {
      border-right: none;
    }
  }
}

.el-button + .el-button {
  margin-left: 8px;
}

.hover-effect {
  text-decoration: none;
  /* 默认无下划线 */
  color: #22513a;
  transition: text-decoration 0.3s ease;
  /* 平滑过渡效果 */
}

.hover-effect:hover {
  text-decoration: underline;
  /* 显示下划线 */
  text-decoration-color: #22513a;
  /* 下划线颜色 */
  text-decoration-thickness: 2px;
  /* 下划线厚度 */
  text-decoration-offset: 2px;
  /* 下划线距离文字的距离 */
}
</style>
